<template>
	<view>
		<view class="goods-nav">
			<view class="l">
				<view class="item" @click="goHome">
					<uni-icons type="home" size="24" color="#333"></uni-icons>
					<view>店铺</view>
				</view>
				<view class="item">
					<uni-icons type="chat" size="24" color="#333"></uni-icons>
					<view>客服</view>
				</view>
				<view class="item" @click="openCart">
					<uni-icons type="cart" size="24" color="#333"></uni-icons>
					<view>购物车</view>
					<view class="tag" v-if="cart_num>0?true:false">{{cart_num}}</view>
				</view>
			</view>
			<view class="r">
				<view class="btn" @click="addCart()">加入购物车</view>
			</view>
			<view class="buy-box" @click="addBuy()">
				<view class="buy">
					<image mode="heightFix" src="https://www.huangjinya.top/xcx/detail/mai.png" style="height:70upx" />
				</view>
			</view>

		</view>
		<cartModel ref="cartModel" />
	</view>
</template>
<script>
	import cartModel from '@/components/cart-model/cart-model.vue';
	export default {
		props: {
			item: {
				type: Object,
				default: {}
			},
			num: {
				type: Number,
				default: 0
			}
		},
		components: {
			cartModel
		},
		data() {
			return {
				cart_num: this.$store.state.user_info.cart_num
			}
		},
		watch: {

			"$store.state.user_info.cart_num": function(val, oldval) {
				console.log(val)
				this.cart_num = val
			},
		},
		methods: {
			openCart() {
				uni.navigateTo({
					url: '/pages/cart_page/cart_page'
				});
			},
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			addCart() {
				if (!this.item) {
					this.$emit('openPopup');
					return false
				}
				if (this.num == 0) {
					this.$emit('openPopup');
					return false
				}
				//加入购物车
				this.$myRequest('cart/add', {
					product_id: this.item.id,
					product_norm_id: this.item.id,
					num: this.num
				}, "POST").then((res) => {
					if (res.code == 1000) {
						let user_info = this.$store.state.user_info
						user_info.cart_num = res.data.data
						this.$store.commit('setUserInfo', user_info)
					} else {
						uni.showToast({
							title: '加入购物车失败',
							icon: 'error'
						})
					}
				})
			},
			addBuy() {

				if (!this.item) {
					this.$emit('openPopup');
					return false
				}
				if (this.num == 0) {
					this.$emit('openPopup');
					return false
				}
				let bags = [];
				bags.push({
					"price": this.item.price,
					"head": this.item.head,
					"num": this.num,
					"product_title": this.item.product_title,
					"product_id": this.item.product_id,
					"product_norm_title": this.item.title,
					"product_norm_id": this.item.id,
				})
				this.$store.commit('setBags', bags);
				this.$Router.push({
					path: '/pages/balance/balance'
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.goods-nav {
		width: 100%;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		height: 150upx;
		display: flex;
		padding-top: 20upx;
		padding-left: 30upx;
		padding-right: 30upx;
		box-sizing: border-box;
		border-top: 1px solid #f5f5f5;

		.l {
			width: 40%;
			display: flex;

			.item {
				font-size: 22upx;
				text-align: center;
				flex: 1;
				position: relative;

				.tag {
					color: red;
					position: absolute;
					top: -10upx;
					right: 6upx;
					background: $uni-color-error;
					color: #fff;
					width: 30upx;
					height: 30upx;
					line-height: 30upx;
					border-radius: 50%;
				}
			}
		}

		.r {
			flex: 1;
			padding-left: 30upx;
			border-radius: 20upx;
			box-sizing: border-box;

			.btn {
				width: 60%;
				background: $uni-color-team;
				padding: 20upx 30upx;
				font-size: 32upx;
				color: $uni-color-green;
				font-weight: 700;
			}
		}

		.buy-box {
			padding: 20upx;
			background-color: #fff;
			border-radius: #f5f5f5;
			position: absolute;
			height: 120upx;
			width: 120upx;
			right: 30upx;
			bottom: 10upx;
			border-radius: 50%;
			border: 1px solid#f5f5f5;

			.buy {
				font-size: 40upx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				width: 100%;
				height: 100%;
				border-radius: 50%;
				text-align: center;
				background-color: $uni-color-team;

				image {
					height: 20upx;
				}
			}
		}
	}
</style>